<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="站点名称" prop="stationName">
        <el-input
          v-model="queryParams.stationName"
          placeholder="请输入站点名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="站点编码" prop="stationCode">
        <el-input
          v-model="queryParams.stationCode"
          placeholder="请输入站点编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="GPS纬度坐标" prop="latitude">
        <el-input
          v-model="queryParams.latitude"
          placeholder="请输入GPS纬度坐标"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="GPS经度坐标" prop="longitude">
        <el-input
          v-model="queryParams.longitude"
          placeholder="请输入GPS经度坐标"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="站点状态" prop="isActive">
        <el-input
          v-model="queryParams.isActive"
          placeholder="请输入站点状态"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt">
        <el-date-picker clearable
          v-model="queryParams.createdAt"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="最后更新时间" prop="updatedAt">
        <el-date-picker clearable
          v-model="queryParams.updatedAt"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择最后更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['bus:stations:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['bus:stations:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['bus:stations:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['bus:stations:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="stationsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="站点名称" align="center" prop="stationName" width="150" />
      <el-table-column label="站点编码" align="center" prop="stationCode" width="120" />
      <el-table-column label="位置信息" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.latitude && scope.row.longitude && scope.row.latitude != 0 && scope.row.longitude != 0"
            size="mini"
            type="text"
            icon="el-icon-location-information"
            @click="handleViewMap(scope.row)"
            style="color: #409eff;">
            查看位置
          </el-button>
          <span v-else style="color: #c0c4cc; font-size: 12px;">暂无坐标</span>
        </template>
      </el-table-column>
      <el-table-column label="站点详细地址" align="center" prop="address" />
      <el-table-column label="站点状态" align="center" prop="isActive" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isActive === 1 ? 'success' : 'danger'" size="mini">
            {{ scope.row.isActive === 1 ? '正常使用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后更新时间" align="center" prop="updatedAt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bus:stations:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="handleVoiceGenerate(scope.row)"
            v-hasPermi="['bus:stations:voice']"
            style="color: #67C23A;"
          >语音播报</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bus:stations:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改公交站点信息，存储所有公交站点的基础信息和GPS坐标对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="站点名称" prop="stationName">
          <el-input v-model="form.stationName" placeholder="请输入站点名称" />
        </el-form-item>
        <el-form-item label="站点编码" prop="stationCode">
          <el-input v-model="form.stationCode" placeholder="请输入站点编码" />
        </el-form-item>
        <el-form-item label="位置信息">
          <div class="location-input-group">
            <el-row :gutter="12">
              <el-col :span="10">
                <el-input
                  v-model="form.latitude"
                  placeholder="GPS纬度坐标"
                  size="small">
                  <template slot="prepend">纬度</template>
                </el-input>
              </el-col>
              <el-col :span="10">
                <el-input
                  v-model="form.longitude"
                  placeholder="GPS经度坐标"
                  size="small">
                  <template slot="prepend">经度</template>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="primary"
                  icon="el-icon-location"
                  size="small"
                  @click="openMapPicker"
                  title="地图选择位置">
                  地图选点
                </el-button>
              </el-col>
            </el-row>
            <div class="coordinate-tips" v-if="form.latitude && form.longitude">
              <i class="el-icon-success" style="color: #67C23A;"></i>
              <span>坐标：{{ form.latitude }}, {{ form.longitude }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="站点详细地址" prop="address">
          <el-input v-model="form.address" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="站点状态" prop="isActive">
          <el-input v-model="form.isActive" placeholder="请输入站点状态" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createdAt">
          <el-date-picker clearable
            v-model="form.createdAt"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后更新时间" prop="updatedAt">
          <el-date-picker clearable
            v-model="form.updatedAt"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择最后更新时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 地图查看器组件 -->
    <map-viewer
      :show.sync="mapViewerVisible"
      :station-info="currentStationInfo">
    </map-viewer>

    <!-- 地图位置选择器组件 -->
    <map-location-picker
      :show.sync="mapPickerVisible"
      :latitude="form.latitude"
      :longitude="form.longitude"
      @confirm="onMapLocationConfirm">
    </map-location-picker>

    <!-- 语音播报对话框 -->
    <el-dialog title="语音播报" :visible.sync="voiceDialogVisible" width="600px" append-to-body>
      <div class="voice-container">
        <el-form :model="voiceForm" ref="voiceForm" label-width="100px">
          <el-form-item label="站点名称">
            <span class="station-name">{{ currentStation.stationName }}</span>
          </el-form-item>
          <el-form-item label="播报类型" prop="announcementType">
            <el-select v-model="voiceForm.announcementType" placeholder="请选择播报类型" style="width: 100%">
              <el-option label="到站播报" value="arrival"></el-option>
              <el-option label="发车播报" value="departure"></el-option>
              <el-option label="下一站播报" value="next"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预览文本">
            <el-input
              v-model="voicePreviewText"
              type="textarea"
              :rows="3"
              readonly
              placeholder="请选择播报类型查看预览文本">
            </el-input>
          </el-form-item>
          <el-form-item label="语音参数">
            <el-row :gutter="20">
              <el-col :span="8">
                <label>语音类型：</label>
                <el-select v-model="voiceForm.voiceType" size="mini" style="width: 100%">
                  <el-option label="度小宇(男)" value="1"></el-option>
                  <el-option label="度小美(女)" value="0"></el-option>
                  <el-option label="度逍遥(男)" value="3"></el-option>
                  <el-option label="度丫丫(童)" value="4"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <label>语速(0-15)：</label>
                <el-slider v-model="voiceForm.speed" :min="0" :max="15" show-input size="mini"></el-slider>
              </el-col>
              <el-col :span="8">
                <label>音量(0-15)：</label>
                <el-slider v-model="voiceForm.volume" :min="0" :max="15" show-input size="mini"></el-slider>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="音调(0-15)">
            <el-slider v-model="voiceForm.pitch" :min="0" :max="15" show-input style="width: 300px;"></el-slider>
          </el-form-item>
        </el-form>

        <!-- 语音播放区域 -->
        <div class="voice-player" v-if="currentVoicePath">
          <el-divider content-position="left">语音播放</el-divider>
          <div class="audio-control">
            <audio
              :src="getVoiceUrl(currentVoicePath)"
              controls
              style="width: 100%;"
              ref="audioPlayer">
              您的浏览器不支持音频播放
            </audio>
          </div>
        </div>

        <div class="voice-history" v-if="voiceHistory.length > 0">
          <el-divider content-position="left">历史语音</el-divider>
          <el-table :data="voiceHistory" size="mini" max-height="200">
            <el-table-column prop="announcementType" label="类型" width="80">
              <template slot-scope="scope">
                <el-tag size="mini">{{ getAnnouncementTypeLabel(scope.row.announcementType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="text" label="文本" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="生成时间" width="120">
              <template slot-scope="scope">
                <span style="font-size: 12px;">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="playVoice(scope.row.filePath)">播放</el-button>
                <el-button type="text" size="mini" style="color: #f56c6c;" @click="deleteVoice(scope.row.filePath, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="generateVoice" type="primary" :loading="voiceGenerating">
          <i class="el-icon-s-promotion"></i> 生成语音
        </el-button>
        <el-button @click="voiceDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listStations, getStations, delStations, addStations, updateStations } from "@/api/bus/stations"
import { generateSpeech, deleteVoiceFile } from "@/api/bus/tts"
import { getVoiceFilesByStation } from "@/api/bus/voiceFiles"
import MapViewer from "./components/MapViewer"
import MapLocationPicker from "./components/MapLocationPicker"

export default {
  name: "Stations",
  components: {
    MapViewer,
    MapLocationPicker
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公交站点信息，存储所有公交站点的基础信息和GPS坐标表格数据
      stationsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stationName: null,
        stationCode: null,
        latitude: null,
        longitude: null,
        address: null,
        isActive: null,
        createdAt: null,
        updatedAt: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stationName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" }
        ],
      },
      // 地图查看器相关
      mapViewerVisible: false,
      currentStationInfo: {},
      // 地图位置选择器相关
      mapPickerVisible: false,
      // 语音播报相关
      voiceDialogVisible: false,
      voiceGenerating: false,
      currentStation: {},
      currentVoicePath: '',
      voiceHistory: [],
      voiceForm: {
        announcementType: 'arrival',
        voiceType: '1',
        speed: 5,
        pitch: 5,
        volume: 8
      }
    }
  },
  computed: {
    voicePreviewText() {
      if (!this.currentStation.stationName || !this.voiceForm.announcementType) {
        return ''
      }

      const stationName = this.currentStation.stationName
      switch (this.voiceForm.announcementType) {
        case 'arrival':
          return `列车即将到达${stationName}站，请准备下车`
        case 'departure':
          return `列车即将从${stationName}站发车，请注意安全`
        case 'next':
          return `下一站：${stationName}`
        default:
          return ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询公交站点信息，存储所有公交站点的基础信息和GPS坐标列表 */
    getList() {
      this.loading = true
      listStations(this.queryParams).then(response => {
        this.stationsList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        stationName: null,
        stationCode: null,
        latitude: null,
        longitude: null,
        address: null,
        isActive: null,
        createdAt: null,
        updatedAt: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加公交站点信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getStations(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改公交站点信息"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateStations(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addStations(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除公交站点信息，存储所有公交站点的基础信息和GPS坐标编号为"' + ids + '"的数据项？').then(function() {
        return delStations(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('bus/stations/export', {
        ...this.queryParams
      }, `stations_${new Date().getTime()}.xlsx`)
    },
    /** 查看地图位置 */
    handleViewMap(row) {
      this.currentStationInfo = row
      this.mapViewerVisible = true
    },
    /** 打开地图位置选择器 */
    openMapPicker() {
      this.mapPickerVisible = true
    },
    /** 地图位置选择确认 */
    onMapLocationConfirm(location) {
      this.form.latitude = location.latitude
      this.form.longitude = location.longitude
      if (location.address && !this.form.address) {
        this.form.address = location.address
      }
      this.$message.success('位置选择成功')
    },
    /** 处理语音生成按钮点击 */
    handleVoiceGenerate(row) {
      this.currentStation = { ...row }
      this.voiceDialogVisible = true
      this.currentVoicePath = ''
      // 重置语音参数
      this.voiceForm = {
        announcementType: 'arrival',
        voiceType: '1',
        speed: 5,
        pitch: 5,
        volume: 8
      }

      // 查询该站点已有的语音文件
      this.loadStationVoiceHistory()
    },
    /** 生成语音 */
    async generateVoice() {
      if (!this.voiceForm.announcementType) {
        this.$message.error('请选择播报类型')
        return
      }

      this.voiceGenerating = true
      try {
        const params = new URLSearchParams()
        params.append('text', this.voicePreviewText)
        params.append('stationId', this.currentStation.id) // 新增：传递站点ID
        params.append('voiceType', this.voiceForm.voiceType)
        params.append('speed', this.voiceForm.speed)
        params.append('pitch', this.voiceForm.pitch)
        params.append('volume', this.voiceForm.volume)

        const response = await generateSpeech(params)

        if (response.code === 200) {
          this.currentVoicePath = response.data
          this.addToVoiceHistory(this.voicePreviewText, this.currentVoicePath, this.voiceForm.announcementType)
          this.$message.success('语音生成成功')

          // 延迟一点后自动播放
          this.$nextTick(() => {
            setTimeout(() => {
              if (this.$refs.audioPlayer) {
                this.$refs.audioPlayer.load()
                this.$refs.audioPlayer.play().catch(() => {
                  // 忽略自动播放失败（浏览器限制）
                })
              }
            }, 200)
          })
        } else {
          this.$message.error(response.msg || '语音生成失败')
        }
      } catch (error) {
        console.error('语音生成失败:', error)
        this.$message.error('语音生成失败: ' + (error.message || '网络错误'))
      } finally {
        this.voiceGenerating = false
      }
    },
    /** 添加到语音历史记录 */
    addToVoiceHistory(text, filePath, announcementType) {
      const historyItem = {
        text: text,
        filePath: filePath,
        announcementType: announcementType,
        createTime: this.formatTime(new Date())
      }
      this.voiceHistory.unshift(historyItem)
      // 只保留最近10条记录
      if (this.voiceHistory.length > 10) {
        this.voiceHistory = this.voiceHistory.slice(0, 10)
      }
    },
    /** 播放语音 */
    playVoice(filePath) {
      if (!filePath) return

      const audio = new Audio(this.getVoiceUrl(filePath))
      audio.play().catch(error => {
        console.error('音频播放失败:', error)
        this.$message.error('音频播放失败')
      })
    },
    /** 删除语音文件 */
    async deleteVoice(filePath, index) {
      try {
        const response = await deleteVoiceFile(filePath)

        if (response.code === 200) {
          this.voiceHistory.splice(index, 1)
          if (this.currentVoicePath === filePath) {
            this.currentVoicePath = ''
          }
          this.$message.success('语音文件删除成功')
        } else {
          this.$message.error(response.msg || '删除失败')
        }
      } catch (error) {
        console.error('删除语音文件失败:', error)
        this.$message.error('删除失败')
      }
    },
    /** 获取语音文件URL */
    getVoiceUrl(filePath) {
      if (!filePath) return ''
      return process.env.VUE_APP_BASE_API + filePath
    },
    /** 获取播报类型标签 */
    getAnnouncementTypeLabel(type) {
      const labels = {
        arrival: '到站',
        departure: '发车',
        next: '下一站'
      }
      return labels[type] || type
    },
    /** 格式化时间 */
    formatTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}`
    },
    /** 加载站点语音历史 */
    async loadStationVoiceHistory() {
      try {
        const response = await getVoiceFilesByStation(this.currentStation.id)
        if (response.code === 200) {
          this.voiceHistory = response.data.map(item => ({
            text: this.generateAnnouncementText(item.announcementTypeId, this.currentStation.stationName),
            filePath: item.filePath,
            announcementType: this.mapAnnouncementTypeIdToCode(item.announcementTypeId),
            createTime: this.parseTime(item.createdAt, '{y}-{m}-{d} {h}:{i}')
          }))

          // 检查是否有当前播报类型的语音文件
          const currentTypeVoice = this.voiceHistory.find(
            item => item.announcementType === this.voiceForm.announcementType
          )
          if (currentTypeVoice) {
            this.currentVoicePath = this.getFullVoiceUrl(currentTypeVoice.filePath)
          }
        }
      } catch (error) {
        console.error('查询站点语音历史失败:', error)
      }
    },
    /** 根据播报类型ID映射到代码 */
    mapAnnouncementTypeIdToCode(typeId) {
      const mapping = {
        1: 'next',      // 即将到站
        2: 'arrival',   // 已到达
        3: 'transfer',  // 换乘提示
        4: 'terminal',  // 终点站
        5: 'safety'     // 安全提示
      }
      return mapping[typeId] || 'custom'
    },
    /** 生成播报文本 */
    generateAnnouncementText(typeId, stationName) {
      const type = this.mapAnnouncementTypeIdToCode(typeId)
      switch (type) {
        case 'arrival':
          return `列车即将到达${stationName}站，请准备下车`
        case 'departure':
          return `列车即将从${stationName}站发车，请注意安全`
        case 'next':
          return `下一站：${stationName}`
        default:
          return `站点播报：${stationName}`
      }
    },
    /** 获取完整的语音文件URL */
    getFullVoiceUrl(filePath) {
      if (!filePath) return ''
      return process.env.VUE_APP_BASE_API + filePath
    }
  }
}
</script>

<style scoped>
.location-input-group {
  width: 100%;
}

.coordinate-tips {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border: 1px solid #b3e5fc;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
}

.coordinate-tips i {
  margin-right: 5px;
}

.coordinate-tips span {
  color: #303133;
}

.el-input-group__prepend {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

/* 语音播报样式 */
.voice-container {
  max-height: 80vh;
  overflow-y: auto;
}

.station-name {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.voice-player {
  margin: 20px 0;
}

.audio-control {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.voice-history {
  margin-top: 20px;
}

.voice-history .el-table {
  font-size: 13px;
}
</style>
